<template>
    <div class="container">
        <Breadcrumb :items="['menu.list', '营业额汇总统计']" />
        <a-card class="general-card" title="营业额汇总统计">
            <a-row>
                <a-col>
                    <a-form :model="formData" label-align="auto" auto-label-width>
                        <a-row :gutter="16">

                            <a-col :span="8">
                                <div style="display: flex; align-items: center; gap: 0 10px;">
                                    <a-range-picker :allow-clear="false" v-model="rangeValue" @change="onChange"
                                        @select="onSelect" style=" width: 100%; " />
                                </div>
                            </a-col>
                            <a-col :span="16">
                                <div style="display: flex; justify-content: flex-end">
                                    <a-button type="primary" @click="exportData">
                                        导出
                                    </a-button>
                                </div>
                            </a-col>

                        </a-row>
                    </a-form>
                </a-col>
            </a-row>

            <div style="margin-top: 20px;">
                <a-table :virtual-list-props="{ height: 600 }"   :stripe="true" :bordered="true" :loading="loading" :columns="columns" :data="tableList"
                    :pagination="false" @page-change="onPageChange">
                    <!-- <template #totalAmount="{ record }">
                        自助售货机
                    </template> -->
                    <template #customerName="{ record }">
                        {{ record.customerName }}({{ record.customerId }})
                    </template>
                </a-table>
            </div>

        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import moment from 'moment';

import { thirdsyncgroupstats } from '@/api/hairdryer'
import { baseUrl } from "@/api/interceptor"






//时间选择器
let rangeValue = ref([moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')])
//时间选择器
const onSelect = (dateString, date) => {
    console.log('onSelect: ', dateString, date);
}


const onChange = (dateString, date) => {
    console.log('onChange: ', dateString, date);

    if (dateString) {
        formData.value.stime = dateString[0];
        formData.value.etime = dateString[1];

    } else {
        formData.value.stime = '';
        formData.value.etime = '';
    }

    getstatsByDayOrMonth()
}





let loading = ref(false);
//查询列表
let formData = ref({
    page: 1,
    size: 10,
    stime: moment().startOf('month').format('YYYY-MM-DD'),
    etime: moment().endOf('month').format('YYYY-MM-DD')
})
const pagination = ref({
    "hide-on-single-page": true,
    current: formData.value.page,
    pageSize: formData.value.size,
    showTotal: true,
    total: 0
}); // 分页属性


const columns = ref([
    {
        title: '商户简称(商户号)',
        dataIndex: 'customerName',
        width: '180',
        slotName: 'customerName',
    },
    {
        title: '场景名称',
        dataIndex: 'sourceSystem',
        width: '120',
        // slotName: 'totalAmount',

    },
    // {
    //     title: '支付渠道',
    //     dataIndex: 'orderCount',
    //     width: '100',

    // },
    {
        title: '交易笔数(含退款)',
        dataIndex: 'transactionCount',
        width: '100',
    },
    {
        title: '交易金额(含退款)',
        dataIndex: 'transactionAmount',
        width: '100',
    },

      {
        title: '手续费',
        dataIndex: 'refundCount',
        width: '100',
    },
    {
        title: '退款笔数',
        dataIndex: 'refundCount',
        width: '100',
    },
    {
        title: '退款金额',
        dataIndex: 'refundAmount',
        width: '100',
    },
    {
        title: '净交易金额',
        dataIndex: 'netTransactionAmount',
        width: '100',
    },

])
const tableList = ref([]);
const onPageChange = (current) => {
    formData.value.page = current;
    pagination.value.current = current;
    getstatsByDayOrMonth()

};


//获取列表

const getstatsByDayOrMonth = async () => {

    try {
        loading.value = true
        let res = await thirdsyncgroupstats(formData.value)

        tableList.value = res.data.content
        pagination.value.total = res.data.totalElements;
        loading.value = false

    } catch (error) {
        loading.value = false

    }


}


//导出数据
const exportData = async () => {
    // 使用 formData.value 获取实际值
    const formDataValue = formData.value;
    
    // 过滤并准备参数
    const searchParams = new URLSearchParams();
    Object.entries(formDataValue).forEach(([key, value]) => {
        if (value != null && value !== '') { // 跳过 null、undefined 和空字符串
            searchParams.append(key, value);
        }
    });

    // 拼接 URL 并打开新窗口
    window.open(`${baseUrl}/api/thirdsync/group-stats/export-custom?${searchParams.toString()}`, '_blank');


}



onMounted(() => {
    getstatsByDayOrMonth()
})

</script>
<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;

    .search-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0 10px;
    }


    .container-table {
        margin-top: 20px;

        .general-card {
            box-sizing: border-box;
            padding: 20px 0;


        }
    }
}


.form-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;

    .label {
        font-size: 18px;
        font-weight: bold;
    }

    .content {
        font-size: 16px;

    }
}
    /* 确保表格表头样式正确应用 */
    /deep/ .arco-table-th {
            color: #000 !important;
            background-color: #94B5F3 !important;
            font-weight: bold !important;
    }



</style>